<template>
	<view>
		<!-- <u-navbar @leftClick="leftClick" leftText="返回" title="详情" placeholder fixed>
		</u-navbar> -->
		<u-navbar title="详情" placeholder fixed>
			<view class="navbar-left-text" slot="left">
				<view v-if="!isShowBackHome"  @click="leftClick" class="">返回</view>
			</view>
			<view class="navbar-left-text" slot="left">
				<uni-icons v-if="isShowBackHome" type="home-filled" size="24" style="margin-left: 10rpx;" @click="goHome"></uni-icons>
			</view>
		</u-navbar>
		
		<view class="to-video" v-if="info.video && info.switch == 1">
			<video class="cover" :src="oss(info.video)"></video>
		</view>
		
		<view class="tou-box">
			<view class="price"> <text>{{info.price}}</text> 元</view>
			<view class="browse">{{info.read_num}}浏览</view>
		</view>
		 <!-- @click="copy(info.name)" -->
		<view class="title"> <text user-select>{{info.name}}</text> </view>
		<view class="content">
			{{info.content}}
		</view>
		
		<!-- <view class="covers" v-if="info.video">
			<video class="cover" :src="oss(info.video)"></video>
			<view class="overlay" v-if="info.switch != 1">该用户暂无开通视频功能</view>
		</view> -->
		
		<view class="image">
			<image  @click="swiperGo(i)" v-for="i in list1" :src="i" mode="widthFix"></image>
		</view>
		
		<invite></invite>
		
		
		<view class="" style="margin-top: 62rpx;"></view>
		<!-- <u-divider text="为你推荐"></u-divider> -->
		<view class="" style="text-align: center;font-size: 32rpx;font-weight: 800;">
			为你推荐
		</view>
		<view class="item-box">
			<view class="each-box" v-for="data in shoplist" @click="toused(data)">
				<view class="img">
					<image class="shop_img" v-if="data.images.length > 0" :src="oss(data.images[0])" mode="aspectFill"></image>
					<image class="video_img" v-if="data.video" style="width: 38rpx;height: 38rpx;" src="../../static/video.png" mode=""></image>
				</view>
				<view class="text-box">
					<view class="title"> <text class="top" v-if="data.switch">置顶</text> {{data.name}} </view>
					<view class="price" v-if="data.price != 0"> <text>{{data.price}}</text> 元</view>
					<view class="price" v-else> <text>面议</text></view>
					<view class="names">
						<image :src="oss(data.user.avatar)" mode=""></image>
						<text>{{data.user.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="fixation">
			<!-- <invite></invite> -->
		</view>
		
		<view class="bottom-box">
			<view class="name">{{info.user.nickname}}</view>
			
			<view class="" style="display: flex;">
				<view class="relation-btn" @click="playPinnedShow">帮他置顶</view>
				<view class="relation-btn" style="margin-left: 24rpx;" @click="IdlePurchase">求购求租</view>
				<view class="relation-btn" style="margin-left: 24rpx;" @click="call()">电话联系</view>
			</view>
		</view>
		<!-- 置顶弹窗 -->
		<TopPopup :ispublish="0" :show1="pinnedShow" :meal="meal" @padlock="padlock" @ckeck="ckeck"></TopPopup>
		
		<view class="cotton"></view>
		
		<!-- 一键分享 -->
		<!-- <view class="share">
		    <u-button id="shareBtn" open-type="share">分享</u-button>
		</view> -->
		
		<view class="share-box">
			<button class="iconfont icon-yaoqing" style="width: 110rpx;height: 110rpx;z-index: 99;" open-type="share"></button>
			<image class="fenx-img" src="../../static/fenx.png" mode=""></image>
		</view>
		<text class="fenxiang">分享</text>
	</view>
</template>

<script>
	import invite from "@/components/invite.vue"
	import TopPopup from "@/components/topPopup.vue"
	export default {
		components: {
			invite,TopPopup
		},
		data() {
			return {
				id:'',
				info:'',
				list1:[],
				
				status: 'loadmore',
				flag: false,
				shoplist:[],
				page:1,
				isShowBackHome:false,
				pinnedShow:false,//置顶弹窗
				paytype:2,
				meal:[],
				myMoney:0
			}
		},
		onShareAppMessage: function() {
		  return {
		    title: this.info.name,
		    path: '/pagesA/index/usedDetail?id=' + this.id,
		    imageUrl:this.list1[0], // 设置分享卡片图片
		    success: function() {
		      uni.showToast({
		        title: '分享成功',
		        icon: 'success'
		      })
		    }
		  }
		},
		onShareTimeline(){
		    return{
		      title:this.info.name,  //分享的标题
		      query:{
				  id:this.id
			  },    //点击分享链接之后进入的页面路径
		      imageUrl:this.list1[0], // 设置分享卡片图片
		    }
		},
		onLoad(options) {
			this.id = options.id
			this.getinfo(options.id)
			this.getlist()
			
			let pages = getCurrentPages()
			if(pages.length === 1){
				this.isShowBackHome = true
			}
			if(uni.getStorageSync('token')){
				this.getcombo()
				this.getMoney()
			}
			// #ifdef MP-WEIXIN
			this.paytype = 2
			// #endif
			// #ifdef APP
			this.paytype = 1
			// #endif
		},
		onReachBottom() {
			console.log('````````````')
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.status = 'loading';
			this.getlist()
		},
		methods: {
			playPinnedShow(){
				if(!uni.getStorageSync('token')){
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
					return
				}
				this.pinnedShow = true
			},
			getMoney(){
				uni.$u.http.post('/getmoney ').then(res => {
					if (res.code === 1) {
						this.myMoney = res.data
					}
				}).catch((res) => {
					
				})
			},
			ckeck(e) {
				if(!e.id) return this.toast('请选择置顶套餐')
				if(this.myMoney < e.money){
					//余额不足 微信支付
					uni.$u.http.post('/meallist', {
						type:4,
						order_id:this.id,
						id:e.id,
						paytype:this.paytype
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							let that = this
							uni.requestPayment({
								appId: res.data.pay.appId,
								nonceStr: res.data.pay.nonceStr,
								package: res.data.pay.package,
								paySign: res.data.pay.paySign,
								signType: res.data.pay.signType,
								timeStamp: res.data.pay.timeStamp,
								success: (e) => {
									that.toast(res.msg)
									that.pinnedShow = false
								},
								fail: (e) => {
									that.$u.toast('支付失败');
								}
							})
						}
					}).catch((res) => {
							
					})
				}else {
					//余额支付
					uni.$u.http.post('/meallist', {
						type:4,
						order_id:this.id,
						id:e.id,
						paytype:4
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.toast(res.msg)
							this.pinnedShow = false
						}
					}).catch((res) => {
							
					})
				}
			},
			// 取消置顶
			padlock(){
				this.pinnedShow = false
			},
			//置顶套餐
			getcombo() {
				uni.$u.http.post('/meallist',{
					mealtype:4
				}).then(res => {
					if (res.code == 1) {
						this.meal = res.data
					}
				}).catch((res) => {
				})
			},
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			IdlePurchase(){
				uni.navigateTo({
					url:'/pagesA/index/upload?type=1'
				})
			},
			swiperGo(img){
				uni.previewImage({
					urls:[img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toused(item){
				uni.redirectTo({
					url:'/pagesA/index/usedDetail?id=' + item.id
				})
			},
			getlist() {
				this.flag = false
				this.status = 'loading';
			
				let data = '';
				data = {
					page: this.page,
					lng: '',
					lat: ''
				}
			
				console.log(data)
				uni.$u.http.post('/searchfree', data).then(res => {
					if (res.code == 1) {
						console.log(res)
			
						this.shoplist = this.shoplist.concat(res.data)
						if (res.data.length === 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {})
			},
			leftClick(){
				uni.navigateBack()
			},
			getinfo(id) {
				uni.$u.http.post('/postfreeinfo', {
					type: 'info',
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.list1 = res.data.images.map((value) => {
							return this.oss(value)
						})
						console.log(this.list1)
						this.info = res.data
						console.log(this.info)
					}
				}).catch((res) => {
			
				})
			},
			call() {
				// if(!uni.getStorageSync('token')){
				// 	uni.$u.route({
				// 		url: 'pagesA/auth/login'
				// 	})
				// 	return
				// }
				//#ifdef MP-WEIXIN
				// console.log(111)
				uni.$u.http.post('/mobilelog',{
					mobile:this.info.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.makePhoneCall({
							phoneNumber: this.info.mobile
						});
					}
				}).catch((res) => {
				
				})
				//#endif
				//#ifdef MP-TOUTIAO
				console.log(111)
				tt.makePhoneCall({ phoneNumber: this.info.mobile})
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(this.info.mobile, true);
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.tou-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx 0 32rpx;
		align-items: center;
		
		.price {
			font-size: 28rpx;
			font-weight: 800;
			color: #FA6759;
			text {
				font-size: 56rpx;
			}
		}
		.browse {
			font-size: 28rpx;
			color: #999999;
			font-weight: 500;
		}
	}
	.title {
		padding: 16rpx 32rpx 0 32rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
	}
	.content {
		padding: 32rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 46rpx;
	}
	.image {
		width: 686rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: auto;
		image {
			width: 100%;
			// display:block;
			// vertical-align:top;
			// line-height:0 
		}
	}
	
	.covers{
		width: 686rpx;
		height: 420rpx;
		position: relative;
		margin: auto;
		// margin-top: 32rpx;
		margin-bottom: 32rpx;
				padding: 20rpx 0;
				.cover{
					width: 100%;
				}
				.overlay {
				  position: absolute;
				  top: 0;
				  left: 0;
				  width: 100%;
				  height: 420rpx;
				  backdrop-filter: blur(10px); /* 添加模糊效果 */
				  text-align: center;
				  line-height: 400rpx;
				  font-size: 24rpx;
				  color: #FEBF4E;
				}
			}
	
	.group-box {
		width: 622rpx;
		height: 95rpx;
		padding: 32rpx;
		background: #FFF9EE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
		margin-top: 32rpx;
		
		.group-l {
			display: flex;
			
			image {
				width: 95rpx;
				height: 95rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
			}
			.group-title {
				margin-left: 24rpx;
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				.name {
					font-size: 24rpx;
					margin-top: 16rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		image {
			width: 18rpx;
			height: 28rpx;
		}
	}
	
	.fixation {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9;
	}
	
	.bottom-box {
		position: fixed;
		bottom: 0;
		width: 686rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		align-items: center;
		.relation-btn {
			width: 184rpx;
			height: 74rpx;
			background: #FEBF4E;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			opacity: 1;
			font-size: 26rpx;
			text-align: center;
			line-height: 74rpx;
			font-weight: 500;
			color: #333333;
		}
		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333;
		}
	}
	.cotton {
		height: 240rpx;
	}
	
	.to-video {
		width: 750rpx;
		.cover {
			width: 750rpx;
		}
	}
	
	
	.share {
			background-color: #FEBF4E;
			color: #333;
			border-radius: 50%;
			position: fixed;
			bottom: 300rpx;
			right: 29rpx;
			z-index: 9;
			#shareBtn {
				background-color: #FEBF4E;
				color: #333;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
		// /deep/ .u-button--info.data-v-2bf0e569 {
		// 	background-color: #FEBF4E !important;
		// 	border-style: none;
		// }
		
		.fenxiang {
				font-size: 24rpx;
				position: fixed;
				bottom: 45%;
				right: 50rpx;
				z-index: 9;
			}
		.share-box {
				position: fixed;
				bottom: 40%;
				right: 29rpx;
				z-index: 9;
				
				.fenx-img {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					top: -100rpx;
				}
			}
			/* button自带样式清除 */
			.share-box button::after {
			  border: none !important;
			  padding: 0 !important;
			  margin: 0 !important;
			}
			
			.share-box button {
			  background-color: transparent !important;
			  padding: 0 !important;
			  line-height: inherit !important;
			  margin: 0 !important;
			  width: auto !important;
			  font-weight: 500 !important;
			  border-radius: none !important;
			}
			
			
			
			
			.item-box {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.each-box {
					width: 331rpx;
					// height: 460rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					margin-top: 24rpx;
					
					.img {
						width: 331rpx;
						height: 230rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						opacity: 1;
						position: relative;
						// background-color: #FA6759;
						
						.shop_img {
							width: 331rpx;
							height: 230rpx;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
						}
						.video_img {
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}
					
					.text-box {
						padding: 24rpx;
						.title {
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
							.top {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								padding: 5rpx 8rpx;
								background: #FEBF4E;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								opacity: 1;
								display: inline-block;
								margin-right: 10rpx;
							}
						}
						.price {
							font-size: 26rpx;
							font-weight: 800;
							color: #FA6759;
							text {
								font-size: 34rpx;
							}
						}
						.names {
							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
							text {
								font-size: 22rpx;
								font-weight: 500;
								color: #999999;
							}
						}
					}
				}
			}
</style>